<template>
  <main-tpl>
    <template #main>
      <div class="video-detail">
        <div class="video-detail-button">
          <a-button @click="back">返回</a-button>
          <span class="video-detail-title">{{ detail?.name || "-" }}</span>
        </div>
        <div class="video-detail-main">
          <div class="video-detail-player">
            <vue3-video-play v-bind="options" poster="https://go.dreamwq.com/videos/ironMan.jpg" />
          </div>
          <div class="video-detail-content">
            <div class="video-detail-content-card">
              <div class="video-detail-content-title">内容理解</div>
              <div class="video-detail-content-value">{{ detail?.result || "" }}</div>
            </div>
            <div class="video-detail-content-card">
              <div class="video-detail-content-title">语音识别</div>
              <div class="video-detail-content-value">{{ detail?.asrText || "" }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </main-tpl>
</template>
<script>
import { onMounted, reactive, toRefs, nextTick } from "vue";
import { useRouter } from "vue-router";
import { detailKidTask, downloadDemoFile } from "@/api/video";
import { message } from "ant-design-vue";

export default {
  name: "VideoDetail",

  setup() {
    const options = reactive({
      width: "800px", //播放器高度
      height: "450px", //播放器高度
      color: "#409eff", //主题色
      title: "", //视频名称
      src: "", //视频源
      muted: false, //静音
      webFullScreen: false,
      speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      lightOff: false, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制器
    });

    const router = useRouter();
    const back = () => {
      router.go(-1);
    };

    const state = reactive({
      modalVisible: false,
      detail: {},
    });

    const init = () => {
      if (router.currentRoute.value.query.id) {
        getDetail(router.currentRoute.value.query.id);
      }
    };

    onMounted(() => {
      nextTick(() => {
        init();
      });
    });

    const getDetail = (id) => {
      const dto = {
        id: id,
      };
      detailKidTask(dto)
        .then((res) => {
          if (res.result === true) {
            state.detail = res?.data || {};
            options.src = downloadDemoFile(state.detail.filepath);
          } else {
            message.error("获取视频详情失败：" + res.message);
          }
        })
        .catch(() => {
          message.error("获取视频详情失败");
        });
    };

    return {
      ...toRefs(state),
      options,
      back,
    };
  },
};
</script>
<style lang="scss" scoped>
.video-detail {
  height: 100%;
  .video-detail-title {
    font-size: 24px;
    padding-left: 16px;
  }
  .video-detail-main {
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    .video-detail-content {
      width: 100%;
      height: 100%;
      margin-left: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .video-detail-content-card {
        width: 49%;
      }
      .video-detail-content-title {
        font-size: 24px;
        font-weight: bold;
      }
      .video-detail-content-value {
        white-space: pre-line;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        width: 100%;
        height: 600px;
      }
    }
  }
}
</style>
